<template>
  <div>
    <x-header :left-options="{backText: ''}" @on-click-more="showMenus = true" >选择人群</x-header>
    <div class="ui-body">
      <group title="已选择" v-if="SelectedEmployeeIds.length">
        <div class="ui-choose-list">
          <div v-for="(item, index) in SelectedEmployeeIds">
            <div v-for="(item1, index1) in commonList">
              <div v-html="item1.value" v-if="item1.isSelect && item === item1.key"></div>
              <div v-for="(item2, index2) in item1.child" v-if="!item1.isSelect && item === item2.key" v-html="item2.value"></div>
            </div>
            <img src="../assets/images/inp_icon.png" style="width: 15px;position: absolute;top: 15px;right: 10px;cursor: pointer;" @click="deleteThis(index)">
          </div>
        </div>
      </group>
      <div>
        
      </div>
      <group title="全部">
        <div v-for="(item, index) in commonList">
          <cell
            :title="item.value"
            is-link
            :border-intent="false"
            :arrow-direction="item.showC ? 'up' : 'down'"
            @click.native="showChild(index)">
            <check-icon :value="item.isSelect" @click.stop.native="selectAll(index)" @on-change="change"></check-icon>
          </cell>
          <checklist style="margin:0 8px" v-if="item.showC" label-position="left" v-model="item.selectedChild" required :options="item.child" @click.stop.native="selectOne(index)" @on-change="change"></checklist>
        </div>
        
      </group>
      <box gap="10px 20px">
        <x-button  type="primary" link="BACK" style="margin-top: 20px;">确定</x-button>
      </box>
    </div>
  </div>
</template>

<script>
import { Group, Cell, XHeader, Checklist, XButton, Box, CheckIcon } from 'vux'
import store from '@/store'
import axios from 'axios'
require('es6-promise').polyfill()
var qs = require('qs')

export default {
  store,
  components: {
    Group,
    Cell,
    XHeader,
    Checklist,
    XButton,
    Box,
    CheckIcon
  },
  data () {
    return {
      commonList: [],
      SelectedEmployeeIds: [],
      index: -1
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.commonList = vm.$store.state.commonList
      vm.SelectedEmployeeIds = vm.$store.state.SelectedEmployeeIds
      vm.init()
    })
  },
  mounted () {
  },
  methods: {
    selectAll (index) {
      this.index = index
      this.commonList[index].isSelect = !this.commonList[index].isSelect
      if (!this.commonList[index].childList.length) {
        this.showChild(index)
        return
      }
      if (this.commonList[index].isSelect) {
        this.commonList[index].selectedChild = this.commonList[index].childList
      } else {
        this.commonList[index].selectedChild = []
      }
      this.SelectedEmployeeIds = [...new Set([...this.SelectedEmployeeIds, this.commonList[index].key])]
      this.dataInit([])
    },
    selectOne (index) {
      this.index = index
    },
    deleteThis (index) {
      this.SelectedEmployeeIds.splice(index, 1)
      setTimeout(() => {
        for (let item1 of this.commonList) {
          if (this.SelectedEmployeeIds.indexOf(item1.key) === -1) {
            item1.isSelect = false
            let selectedChild = [...item1.selectedChild]
            for (let item2 of selectedChild) {
              if (this.SelectedEmployeeIds.indexOf(item2) === -1) {
                item1.selectedChild.splice(item1.selectedChild.indexOf(item2), 1)
              }
            }
          }
        }
        this.$store.commit('updateState', {key: 'commonList', value: this.commonList})
        this.$store.commit('updateState', {key: 'SelectedEmployeeIds', value: this.SelectedEmployeeIds})
      }, 1)
    },
    change (val) {
      if (this.index === -1) return
      if ((val.length !== this.commonList[this.index].childList.length)) {
        this.commonList[this.index].isSelect = false
      } else {
        this.commonList[this.index].isSelect = true
        this.SelectedEmployeeIds = [...new Set([...this.SelectedEmployeeIds, this.commonList[this.index].key])]
      }
      this.dataInit(val)
    },
    dataInit (val) {
      this.SelectedEmployeeIds = [...new Set([...this.SelectedEmployeeIds, ...val])]
      setTimeout(() => {
        for (let item of this.commonList) {
          let SelectedEmployeeIds = [...this.SelectedEmployeeIds]
          if (item.isSelect) {
            for (let item1 of SelectedEmployeeIds) {
              if (item.childList.indexOf(item1) !== -1 && item.selectedChild.indexOf(item1) !== -1) {
                this.SelectedEmployeeIds.splice(this.SelectedEmployeeIds.indexOf(item1), 1)
              }
            }
          } else {
            if (this.SelectedEmployeeIds.indexOf(item.key) !== -1) this.SelectedEmployeeIds.splice(this.SelectedEmployeeIds.indexOf(item.key), 1)
            let SelectedEmployeeIds = [...this.SelectedEmployeeIds]
            for (let item1 of SelectedEmployeeIds) {
              if (item.childList.indexOf(item1) !== -1 && item.selectedChild.indexOf(item1) === -1) {
                this.SelectedEmployeeIds.splice(this.SelectedEmployeeIds.indexOf(item1), 1)
              }
            }
          }
        }
        this.$store.commit('updateState', {key: 'commonList', value: this.commonList})
        this.$store.commit('updateState', {key: 'SelectedEmployeeIds', value: this.SelectedEmployeeIds})
      }, 1)
    },
    showChild (index) {
      this.commonList[index].showC = !this.commonList[index].showC
      if (this.commonList[index].child.length === 0) {
        this.$vux.loading.show({
          text: this.commonList[index].value + '人员获取中...'
        })
        let enterpriseid = document.getElementById('EnterpriseID').value
        axios.post(this.$store.state.url + '/handler/AddressBookService.ashx', qs.stringify({enterpriseid: enterpriseid, type: 'getEmployee', orgID: this.commonList[index].key, choosesendout: ''}))
        .then((rs) => {
          let data = rs.data
          if (data.status === 200) {
            for (let [_index, item] of data.message.entries()) {
              this.commonList[index].child.splice(_index, 0, {key: item.ID, value: item.EmployeeeName})
              this.commonList[index].childList.splice(_index, 0, item.ID)
              if (this.commonList[index].isSelect) {
                this.commonList[index].selectedChild.splice(_index, 0, item.ID)
              }
            }
            this.dataInit([this.commonList[index].key])
          } else {
            this.$vux.toast.text(data.msg, 'bottom')
          }
          this.$vux.loading.hide()
        })
        .catch((response) => {
          this.$vux.loading.hide()
          this.$vux.toast.text('请求失败请稍后再试', 'bottom')
        })
      }
    },
    init () {
      console.log(this.commonList.length)
      if (this.commonList.length !== 0) {
        return
      }
      this.$vux.loading.show({
        text: '数据加载中...'
      })
      let enterpriseid = document.getElementById('EnterpriseID').value || 'F9E7D8E6-32C8-43D2-8017-3BF0FAB2733B'
      axios.post(this.$store.state.url + '/handler/AddressBookService.ashx', qs.stringify({enterpriseid: enterpriseid, type: 'onlyOrg', appid: ''}))
      .then((rs) => {
        let data = rs.data
        if (data.status === 200) {
          for (let [index, item] of data.message[0].ChildListOrgMail.entries()) {
            this.commonList.splice(index, 0, {key: item.OrgID, value: item.OrgName, showC: false, isSelect: false, child: [], selectedChild: [], childList: []})
          }
        } else {
          this.$vux.toast.text(data.msg, 'bottom')
        }
        this.$vux.loading.hide()
      })
      .catch((response) => {
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
        this.$vux.loading.hide()
      })
    }
  }
}
</script>

<style scoped>
  .ui-choose-list{
    background-color: white;
  }
  .ui-choose-list > div{
    position: relative;
    padding: 10px 30px 10px 10px;
    display: inline-block;
    height: 100%;
  }
</style>
